<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>我的申请</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <style>
        .form-item{
            padding: 10px;
        }
        .form-item-value{
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <blockquote class="layui-elem-quote">
        <h1>申请列表</h1>
    </blockquote>
    <!--待审批列表-->
    <table id="grdFormList" lay-filter="grdFormList"></table>
</div>

<script src="/resources/layui/layui.all.js"></script>
<script src="/resources/sweetalert2.all.min.js"></script>

<script>
    var $ = layui.$;
    //将毫秒数转换为"yyyy-MM-dd HH时"字符串格式
    function formatDate(time){
        var newDate = new Date(time);
        return newDate.getFullYear() + "-" +
            (newDate.getMonth() + 1) + "-" + newDate.getDate()
            + " " + newDate.getHours() + "时";
    }
    // 将table渲染为数据表格
    layui.table.render({
        elem : "#grdFormList" , //选择器
        id : "grdFormList" , //id
        url : "/overtime/mylist" , //ajax请求url
        page : true ,
        limit:10,
        limits:[10,20,30],
        text: {
            none: '暂无申请数据'
        },
        cols :[[ //列描述
            {title : "" , width:70 , style : "height:60px" , type:"numbers"}, // numbers代表序号列
            {field : "create_time" , title : "申请时间" , width : 150 , templet: function (d) {
                //templet代表对数据进行加工后再显示
                return formatDate(d.createTime)
            }},
            {field : "form_type" , title : "类型" , width : 100 , templet: function(d){
                switch (d.formType) {
                    case 1:
                        return "工作日加班";
                    case 2:
                        return "周末加班";
                    case 3:
                        return "节假日加班";
                    case 4:
                        return "出差加班";
                }
            }},
            // {field : "departmentName" , title : "部门" , width : 100},
            // {field : "employeeName" , title : "员工" , width : 100},
            {field : "start_time" , title : "起始时间" , width : 150, templet: function (d) {
                    return formatDate(d.startTime)
                }},
            {field : "end_time" , title : "结束时间" , width : 150 , templet: function (d) {
                    return formatDate(d.endTime)
                }},
            {field : "reason" , title : "加班原因" , width : 350 ,templet:function (d){
                return d.reason
                }},
            {field : "state" , title : "状态" , width : 150 , templet: function (d) {
                    switch (d.state) {
                        case "processing":
                            return "审批中";
                        case "approved":
                            return "已通过";
                        case "refused":
                            return "已拒绝";
                    }
                }},
            // {title : "" , width:150 ,type:"space" , templet : function(d){
            //     var strRec = JSON.stringify(d);
            //     return "<button class='layui-btn layui-btn-danger layui-btn-sm btn-audit' data-laf=" + strRec + " >审批</button>";
            // }}
        ]]
    })

</script>
</body>
</html>